var oDiv1=document.getElementById("cir1");
var oDiv2=document.getElementById("cir2");
var oDiv3=document.getElementById("p_1");
var oDiv4=document.getElementById("p_2");
var oInput=document.getElementById("sub").getElementsByTagName("input");
var a=0;
for( var i=0;i<oInput.length;i++){
    oInput[i].index=i;
    oInput[i].onblur=function(){
        for(var j=0;j<oInput.length;j++) {
            if (oInput[j].value != 0) {
                a++;
            }

        }
            oDiv4.style.width = a / (oInput.length) * oDiv3.offsetWidth + "px";
            a=0;
            if (oDiv4.offsetWidth >= oDiv3.offsetWidth) {
                oDiv4.style.width = oDiv3.offsetWidth + "px";
                oDiv2.style.backgroundColor = "#23c279";
                oDiv2.style.color = "#ffffff";

            }
        }




}

